﻿<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="Stylesheet" href="Content/Site.css" />

<title>Systemy Agentowe</title>

<style type="text/css">
.disabled
{
    visibility: hidden;
}
</style>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var since = 0;
    var sessions = new Array();
    var map;
    var refresh = true;
    var trash = [];

    function ISODateString(d) {
        function pad(n) { return n < 10 ? '0' + n : n }
        return d.getUTCFullYear() + '-'
      + pad(d.getUTCMonth() + 1) + '-'
      + pad(d.getUTCDate()) + 'T'
      + pad(d.getUTCHours()) + ':'
      + pad(d.getUTCMinutes()) + ':'
      + pad(d.getUTCSeconds()) + 'Z'
    }

    function initialize() {
        var myLatLng = new google.maps.LatLng(50.065734, 19.919415);
        var myOptions = {
            zoom: 16,
            zoomControl: true,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            mapTypeControl: false,
            streetViewControl: false
        };

        $("#from_date").datepicker({
            dateFormat: "dd-mm-yy",
            defaultDate: -1
        });
        $("#from_date").datepicker('setDate', '-1');
        $("#to_date").datepicker({
            dateFormat: "dd-mm-yy",
            defaultDate: -1
        });
        $("#to_date").datepicker('setDate', '0');
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        realTime();
    }

    function realTime() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Locations.asmx/GetDataSince",
            data: "{\"when\": \"" + ISODateString(new Date(since)) + "\"}",
            dataType: "json",
            success: function (data, a, b) {
                processResult(data);
                if (refresh)
                    setTimeout(realTime, 1000); 
            }
        });
        since = (new Date()).getTime();
    }

    function betweenTime() {
        clear();
        from = $("#from_date").datepicker('getDate');
        to = $("#to_date").datepicker('getDate');
        to.setHours(23);
        to.setMinutes(59);
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Locations.asmx/GetDataBetween",
            data: "{\"from\": \"" + ISODateString(from) + "\", \"to\": \"" + ISODateString(to) + "\"}",
            dataType: "json",
            success: function (data, a, b) {
                processResult(data);
            }
        });
    }

    function changeRealtime() {
        if ($('#real_time').attr("checked") == "checked") {
            clear();
            refresh = true;
            realTime();
        }
        else {
            refresh = false;
            setTimeout(betweenTime, 1000);
        }
        $("#to_date").toggleClass("disabled");
        $("label[for=to_date]").toggleClass("disabled");
    }

    function clear() {
        while (trash[0]) {
            trash.pop().setMap(null);
        }
        sessions = new Array()
        since = 0;
    }

    function dateChanged() {
        if ($('#real_time').attr("checked") != "checked") {
            betweenTime();
        }
    }
    
    function processResult(data) {
        returnedObject = data;

        for (i in returnedObject.d) {
            if (!sessions[returnedObject.d[i].SessionId]) {
                initialPath = new Array();
                for (j in returnedObject.d[i].Locations) {
                    loc = new google.maps.LatLng(returnedObject.d[i].Locations[j].Latitude, returnedObject.d[i].Locations[j].Longitude);
                    initialPath[initialPath.length] = loc;
                    var date = new Date(parseInt(returnedObject.d[i].Locations[j].Time.substr(6)));
                    marker = new google.maps.Marker({
                        map: map,
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            scale: 2
                        },
                        position: loc,
                        title: returnedObject.d[i].Nickname + ": " + date.toLocaleString(),
                        draggable: false
                    });
                    trash.push(marker)
                }
                obj = new Object();
                obj.Nickname = returnedObject.d[i].Nickname;
                obj.Polyline = new google.maps.Polyline(
                {
                    path: initialPath,
                    strokeColor: returnedObject.d[i].Color,
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });
                sessions[returnedObject.d[i].SessionId] = obj;
                obj.Polyline.setMap(map);
                trash.push(obj.Polyline);
            }
            else {
                polyline = sessions[returnedObject.d[i].SessionId].Polyline;
                for (j in returnedObject.d[i].Locations) {
                    loc = new google.maps.LatLng(returnedObject.d[i].Locations[j].Latitude, returnedObject.d[i].Locations[j].Longitude);
                    polyline.getPath().push(loc);
                    var date = new Date(parseInt(returnedObject.d[i].Locations[j].Time.substr(6)))
                    marker = new google.maps.Marker({
                        map: map,
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            scale: 2
                        },
                        position: loc,
                        title: returnedObject.d[i].Nickname + ": " + date.toLocaleString(),
                        draggable: false
                    });
                    trash.push(marker);
                }
            }
        }
    }
</script>
</head>
<body onload="initialize()">
  <div>
    <label for="from_date">From</label>
    <input type="text" id="from_date" onchange="dateChanged()"/>

    <label for="real_time">Now:</label>
    <input type="checkbox" id="real_time" onchange="changeRealtime()" checked/>

    <label for="to_date" class="disabled">To</label>
    <input type="text" id="to_date" onchange="dateChanged()" class="disabled"/>
  </div>
  <div id="map_canvas" style="width:90%"></div>
</body>
</html>
